<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <search-bar></search-bar>
    <box gap="10px">
      <div class="course">
        <div @click="$router.push('/courses?category=1')"><img src="../home/images/c1.png" alt=""></div>
        <div @click="$router.push('/courses?category=2')"><img src="../home/images/c2.png" alt=""></div>
        <div @click="$router.push('/courses?category=3')"><img src="../home/images/c3.png" alt=""></div>
        <div @click="$router.push('/courses?category=4')"><img src="../home/images/c4.png" alt=""></div>
        <div @click="$router.push('/courses?category=5')"><img src="../home/images/c5.png" alt=""></div>
        <div @click="$router.push('/courses?category=6')"><img src="../home/images/c6.png" alt=""></div>
        <div @click="$router.push('/welcome')"><img src="../home/images/c7.png" alt=""></div>
        <div @click="$router.push('/forum')"><img src="../home/images/c8.png" alt=""></div> 
      </div>
      <h4 class="title" style="margin-top: 0px;">名师风采<span @click="$router.push('/teachers')">更多</span></h4>
      <vue-seamless-scroll :data="teachers" class="seamless-warp" :class-option="classOption">
        <ul class="item" :style="{ width: teachers.length * 110 + 'px' }">
          <li v-for="(item, index) in teachers" :key="index" @click="$router.push('/teachers/' + item.id)">
            <img :src="item.avatar" v-if="item.avatar && item.avatar.indexOf('http:') !== -1">
            <img :src="$apiUrl + '/storage/' + item.avatar" v-else>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
    </box>
    <div class="gutter"></div>
    <box gap="10px">
      <div v-if="courses && courses.best.length > 0">
        <h4 class="title">精品课程推荐<span @click="$router.push('/courses/list?type=best')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.best" :key="index" :product="item"></course>
      </div>
      <div v-if="courses && courses.free.length > 0">
        <h4 class="title">免费课程<span @click="$router.push('/courses/list?type=free')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.free" :key="index" :product="item"></course>
      </div>
      <div v-if="courses && courses.all.length > 0">
        <h4 class="title">全部课程<span @click="$router.push('/courses/list?type=all')">更多课程...</span></h4>
        <course v-for="(item, index) in courses.all" :key="index" :product="item"></course>
      </div>
    </box>
    <footer-bar  slot="bottom" selected="home"></footer-bar>
  </view-box>
</template>
<script>
  import { ViewBox, Box } from 'vux'
  import FooterBar from '../components/FooterBar'
  import SearchBar from '../components/SearchBar'
  import Course from '../components/Course'
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    data () {
      return {
        teachers: [],
        courses: null,
        product: {
          thumb_img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525709183907&di=ea23aa45090faba6aebe57b2b5c89942&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F110728%2F6310-110HQ1491019.jpg',
          name: '最佳商业模式（一）'
        }
      }
    },
    computed: {
      classOption () {
        return {
          direction: 2,
          limitMoveNum: 4,
          step: 0.3
        }
      }
    },
    components: {
      ViewBox,
      FooterBar,
      SearchBar,
      Box,
      vueSeamlessScroll,
      Course
    },
    mounted () {
      this._getTeachers()
      this._getGroupCourses()
    },
    methods: {
      _getTeachers () {
        this.$http.get('/users?role=Teacher&page_size=20').then((response) => {
          this.teachers = response.data.data
        })
      },
      _getGroupCourses () {
        this.$vux.loading.show()
        this.$http.get('/courses/group').then((response) => {
          this.$vux.loading.hide()
          this.courses = response.data
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .course {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      width: 48%;
      margin-top: 0px;
      img {
        width: 100%;
      }
    }
  }
  .seamless-warp {
    overflow: hidden;
    height: 130px;
    width: 100%;
    ul.item {
      width: 330px;
      list-style-type: none;
      li {
        float: left;
        margin-right: 10px;
        p {
          text-align: center;
          max-width: 100px;
          overflow: hidden;
        }
      }
    }
    img {
      width: 100px;
    }
  }
  .title {
    font-weight: 500;
    color: #000;
    padding-bottom: 5px;
    margin-top: 10px;
    span {
      float: right;
      color: #999;
      font-size: 14px;
      font-weight: normal;
    }
  }
  .gutter {
    height: 15px;
    margin-top: 10px;
    background: #EFEFF4;
  }
</style>